<template>
  <div id="adDetails">
    <order-nav  :title="$t('广告详情')"/>
    <div class="border_top px-32 box-border mb-28">
      <div class="flex justify-between mt-40">
        <span class="font-400 font-28 text-grey">{{ $t('广告编号') }}</span>
        <span class="font-600 font-28">{{ info.id }}</span>
      </div>
      <div class="flex justify-end mt-44">
        <div v-if="info.on_sale / 1 === 0" class="text-grey bg-grey px-12 py-6 font-24" >{{ $t('已下架') }}</div>
        <div v-if="info.on_sale / 1 === 1" class="bg-grey px-12 py-6 font-24" :class="{grey : checked }">{{ $t('已上架') }}</div>
        <van-switch class="ml-28" disabled v-model="info.on_sale / 1 === 1 ? true : false" size="24"  />
      </div>
      <div class="flex justify-between items-center mt-70">
        <div class="flex flex-col">
          <span class="font-400 font-28 text-grey mb-40">{{ $t('价格') }}</span>
          <span class="font-400 font-28 text-grey ">{{ $t('固定价格') }}</span>
        </div>
        <div class="font-600 font-52">{{ $store.state.home.currency.currency_symbol }} {{info.symbol_value}}</div>
      </div>
    </div>
    <div class="w-full h-16 bg-grey"></div>
    <div class="border_top px-32 box-border mb-28">
      <div class="flex justify-between mt-40">
        <span class="font-400 font-28 text-grey">{{ $t('交易总额') }}</span>
        <span class="font-600 font-28">{{info.symbol_value * info.coin_amount}} {{info.symbol ? info.symbol.toUpperCase() : ''}}</span>
      </div>
      <div class="flex justify-between mt-40">
        <span class="font-400 font-28 text-grey">{{ $t('限额') }}</span>
        <span class="font-600 font-28">{{info.investment_min + ' - ' + info.investment_max + ' ' + info.currency}}</span>
      </div>
      <div class="mt-40 flex justify-between">
        <span class="font-400 font-28 text-grey">{{ $t('付款方式') }}</span>
        <div>{{ info.pay_type_name }}</div>
      </div>
      <div class="flex justify-between mt-40">
        <span class="font-400 font-28 text-grey">{{ $t('付款限时') }}</span>
        <span class="font-600 font-28">{{ info.expire_time }} {{$t('分钟')}}</span>
      </div>
      <div class="w-full h-120 mt-40 text-left lh-120">
        <span class="font-400 font-28 text-grey mr-10"> {{ $t('用户需要') }}</span>
        <span class="font-400 font-28 ">{{ $t('认证 KYC 才可以交易') }}</span>
      </div>
    </div>
    <div class="h-16 w-full bg-grey"></div>
    <div class="mt-50 px-32 flex justify-between items-center">
      <div class="w-252 h-100 font-36 bg-grey rounded-lg mr-22 text-center lh-100" @click="handleClose">{{ $t('关闭') }}</div>
      <div class="flex-1 h-100 font-36 bg-blue rounded-lg text-white text-center lh-100" @click="$router.push({
        path: '/editAd',
        query: {
          ...info,
          type: '1'
        }
      })">{{ $t('編輯詳情') }}</div>
    </div>
    <transition name="left">
      <payPwdInput @submit="handPwd" v-if="show" class="bg-white absolute left-0 top-0 w-full h-full" @close="handleClosePwd"></payPwdInput>
    </transition>
  </div>
</template>

<script>
import OrderNav from "@/components/order-nav/OrderNav";
import { getAdDetail, closeAd } from '@/API/otc'
import {Cell, DropdownItem, DropdownMenu, Icon, Switch, Toast} from "vant";
import payPwdInput from "@/components/payPwdInput";
export default {
  name: "Ad_Details",
  components: {
    payPwdInput,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Icon.name]: Icon,
    [Switch.name]: Switch,
    [Cell.name]: Cell,
    OrderNav,
  },
  data() {
    return {
      type: 'left',
      show: false,
      checked: false,
      form: {
        id: '',
        safeword: ''
      },
      info: {}
    }
  },
  created() {
    this.form.id = this.$route.query.id
    getAdDetail({
      id: this.form.id,
      language: this.$i18n.locale
    }).then(res => {
      //console.log('订单详情', res)
      this.info = res
    })

  },
  methods:{

    click () {
      this.checked = !this.checked;
    },
    handleClosePwd() {
      this.show = false
    },
    handleClose() {
      if (!this.form.safeword) {
        this.show = true
        return
      }
      this.submitDel()
    },
    handPwd(pwd) {
      this.handleClosePwd()
      this.form.safeword = pwd
      this.submitDel()
    },
    submitDel() {
      Toast.loading()
      closeAd(this.form).then((res) => {
        //console.log('关闭订单', res)
        Toast(this.$t('广告关闭成功！'))
        this.$router.push('/c2c/advertise')
        this.form.safeword = ''
      }).catch(() => {
        this.form.safeword = ''
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#adDetails{
  .border_top {
    border-top: 1px solid #C8CAD2;
  }

  .left-enter-active {
    animation: left-in .2s;
  }
  .left-leave-active {
    animation: left-in .2s reverse;
  }
  @keyframes left-in {
    0% {
      transform: translate3d(-100%, 0, 0);
    }
    25% {
      transform: translate3d(-75%, 0, 0);
    }
    50% {
      transform: translate3d(-50%, 0, 0);
    }
    75% {
      transform: translate3d(-25%, 0, 0);
    }
    100% {
      transform: translate3d(0%, 0, 0);
    }
  }

}
</style>
